<template>
  <div class="popupbox-root">
    <div class="title-root">
      <div class="title">
        <span>{{ title }}</span>
      </div>
      <div class="button-close">
        <div class="button-x">×</div>
      </div>
    </div>

    <div class="content">
      <slot name="content"></slot>
    </div>
    <div class="arrow"></div>
    <div class="arrow-shadow"></div>
  </div>
</template>

<script>
  import { defineProps } from 'vue'

  export default {
    name: 'PopupBox'
  }
</script>

<script setup>
  defineProps({
    title: {
      type: String,
      default: ''
    }
  })
</script>

<style lang="scss" scoped>
  @import 'PopupBox';
</style>
